<template>
	<div class="app-container">
		<el-form size="small" :inline="true" label-width="68px">
			<el-form-item label="年份" prop="status">
				<el-date-picker v-model="year" type="year" format="yyyy" value-format="yyyy" placeholder="选择年份"
					@change="yearChange"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
			</el-form-item>
		</el-form>
		<el-table border v-loading="loading" :data="list">
			<el-table-column label="地区" align="center" prop="name" width="120" />
			<el-table-column v-for="(item, index) in monthList" :key="index" :label="item + '月'" align="center">
				<template slot-scope="scope">
					{{ scope.row.lecturer[item] || 0 }}
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { statistics } from "@/api/course/lecturer";
	import XLSX from 'xlsx'
	export default {
		data() {
			return {
				year: '',
				list: [],
				monthList: [],
				startTime: '',
				endTime: '',
				loading: true,
			}
		},
		created() {
			let nowDate = new Date();
			this.year = nowDate.getFullYear().toString();
			this.getList();
		},
		methods: {
			yearChange(e) {
				this.getList();
			},
			/**
			 * 获取时间
			 */
			getTime(){
				let currentYear = this.year;
				this.startTime = `${currentYear}-01-01 00:00:00`
				this.endTime = `${currentYear}-12-31 23:59:59`
			},
			/**
			 * 数据列表
			 */
			getList() {
				this.getTime();
				
				statistics(
					this.startTime, 
					this.endTime
				).then(res => {
					console.log('statistics', res);
					if(res.code == 200) {
						let total = {
							name: '支持市场数/个', 
							lecturer: {},
						};
						let market = {
							name: '市场',
							lecturer: {},
						};
						res.data.forEach(item => {
							this.monthList.push(item.month);
							total.lecturer[item.month] = item.statistics.dealerAmount;
							market.lecturer[item.month] = item.statistics.dealers;
						});
						
						this.list.push(total);
						this.list.push(market);
					}
					this.loading = false;
				});
			},
			/**
			 * 导出
			 */
			handleExport() {
				const cellElements = document.querySelectorAll('thead.has-gutter .cell');
				console.log('cellElements', cellElements);
				
				const contentArray = Array.from(cellElements).map(cell => cell.textContent.trim());
				
				const exportData = [];
				exportData.push(contentArray);
				
				const trElements = document.querySelectorAll('.el-table__body tr');
				
				trElements.forEach(function(item, index) {
				const cells = item.querySelectorAll('.cell');
				const arr=Array.from(cells).map(cell => cell.textContent.trim());
				exportData.push(arr);
				});
				
				const tbCellElements = document.querySelectorAll('tbody.has-gutter .cell');
				const tbContentArray = Array.from(tbCellElements).map(cell => cell.textContent.trim());
				exportData.push(tbContentArray);
				
				console.log('exportData', exportData);
				
				// 创建工作簿
				const workbook = XLSX.utils.book_new();
				const worksheet = XLSX.utils.aoa_to_sheet(exportData);
				
				// 添加工作表到工作簿
				XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
				
				// 导出文件
				XLSX.writeFile(workbook, '月份-市场预约统计.xlsx');
			}
		}
	}
</script>

<style>
</style>